<template>
  <div style="width: 100%; height: 100%">
    <Chart :cdata="cdata" :id="'main' + index" />
  </div>
</template>

<script>
import Chart from './chart.vue'

export default {
  data() {
    return {
      cdata: {
        legendList: [],
        xAxisList: [],
        seriesList: [],
      },
      drawTiming: null,
    }
  },
  components: {
    Chart,
  },
  props: {
    configCode: {
      type: String,
      default: '',
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    this.drawTimingFn()
  },
  beforeDestroy() {
    clearInterval(this.drawTiming)
    this.drawTiming = null
  },
  methods: {
    drawTimingFn() {
      this.queryData()
      this.drawTiming = setInterval(() => {
        this.queryData()
      }, 17000)
    },
    queryData() {
      this.$http
        .get('/visShow/queryData', {
          params: {
            configCode: this.configCode,
            index: this.index,
          },
        })
        .then((res) => {
          const { data } = res
          console.log(data, '柱状图一')
          if (data.status == 200) {
            const temData = data.object.seriesList
            for (let i = 0; i < temData.length; i++) {
              this.cdata.legendList.push(temData[i].name)
              temData[i].type = 'bar'
              // temData[i].barWidth = 10
              // temData[i].itemStyle = {
              //   normal: {
              //     barBorderRadius: 5,
              //     // color: "#FFC328"
              //   },
              // }
            }
            this.cdata.seriesList = temData
            this.cdata.xAxisList = data.object.xAxisList
          }
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
